﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>文件下载</title>
    <link href="~/layui/lib/theme-chalk/index.css" rel="stylesheet" />
    <script src="~/layui/vue.min.js"></script>
    <script src="~/layui/lib/index.js"></script>
    <script src="~/layui/polyfill.min.js"></script>
    <script src="~/layui/axios.js"></script>
    <style>
        html, body {
            padding: 0;
            margin: 0;
            height: 100%;
        }

        #app {
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="app">
        <el-card>
            <div slot="header" class="clearfix">
                <span>文件下载</span>
            </div>
            <el-form ref="modelRef" :model="model" :rules="modelRules" label-width="100px" :inline="true">
                <el-form-item label="设备名称" prop="deviceName">
                    <el-select v-model="model.deviceName">
                        <el-option v-for="(item,index) in deviceList" :key="index" :label="item.deviceName" :value="item.deviceName"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="类型" prop="type">
                    <el-select v-model="model.type">
                        <el-option label="充电" value="充电"></el-option>
                        <el-option label="放电" value="放电"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="开始日期" prop="startTime">
                    <el-date-picker v-model="model.startTime"
                                    type="date"
                                    placeholder="选择开始日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="结束日期" prop="endTime">
                    <el-date-picker v-model="model.endTime"
                                    type="date"
                                    placeholder="选择结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item style="text-align:right;">
                    <el-button type="primary" v-on:click="addDevice">查询</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <el-table :data="dataList" style="width: 100%;" highlight-current-row>
            <el-table-column prop="fileName" label="文件名称" align="center"></el-table-column>
            <el-table-column prop="filePath" label="文件路径" align="center"></el-table-column>
            <el-table-column label="操作" align="center" width="100">
                <template slot-scope="scope">
                    <el-button type="text" v-on:click="downLoadFile(scope.row)">下载</el-button>
                </template>
            </el-table-column>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: function () {
                return {
                    model: {
                        deviceName: '',
                        type: '',
                        startTime: '',
                        endTime: ''
                    },
                    modelRules: {
                        deviceName: [{ required: true, message: '请选择设备名称', trigger: 'blur' },],
                        type: [{ required: true, message: '请选择类型', trigger: 'blur' },],
                        startTime: [{ required: true, message: '请选择开始日期', trigger: 'blur' },],
                        endTime: [{ required: true, message: '请选择结束日期', trigger: 'blur' },]
                    },
                    dataList: [],
                    deviceList: [],
                }
            },
            created() {
                this.queryDevice();
            },
            methods: {
                queryDevice() {
                    axios({
                        method: 'post',
                        url: '/api/KoneVoltage/QueryKoneDevice',
                    }).then(res => {
                        this.deviceList = []
                        if (res.data.errcode !== 0) return this.$message.error(res.data.errmsg)
                        this.deviceList = res.data.data
                    })
                },
                addDevice() {
                    this.$refs.modelRef.validate(valid => {
                        if (!valid) return false
                        axios({
                            method: 'post',
                            url: '/api/KoneVoltage/KoneVoltageDownLoadLog',
                            params: {
                                StartTime: this.model.startTime,
                                EndTime: this.model.endTime,
                                NumberNo: this.model.deviceName,
                                Type: this.model.type
                            }
                        }).then(res => {
                            console.log(res.data)
                            if (res.data.errcode !== 0) return this.$message.error(res.data.errmsg)
                            this.dataList = res.data.data.data
                        })
                    })
                },
                downLoadFile(row) {
                    window.open(row.filePath);
                },
            }
        });
    </script>
</body>
</html>
